<template>
  <div v-show="false" class="print-bill">
    <div
      class="print-area"
      style="margin: 20px; color: #000; font-weight: bold; font-family: 'Microsoft YaHei'"
    >
      <h1 style="text-align: center">报价单</h1>
      <div class="customer-info">
        <div class="info-item">客户单位:{{ checkData.customerName }}</div>
        <div class="info-item">联系人:{{ checkData.contactName }}</div>
      </div>
      <div class="customer-info">
        <div class="info-item">地址：{{ checkData.customerAddress }}</div>
        <div class="info-item">联系电话：{{ checkData.contactPhone }}</div>
      </div>
      <div style="line-height: 24px">产品报价清单：</div>
      <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr style="line-height: 35px">
          <td width="100" style="text-align: center">序号</td>
          <td width="150" style="text-align: center">产品名称</td>
          <td width="100" style="text-align: center">材质代码</td>
          <td width="150" style="text-align: center">尺寸规格</td>
          <td width="150" style="text-align: center">单位</td>
          <td width="150" style="text-align: center">单价（元）</td>
          <td width="150" style="text-align: center">备注</td>
        </tr>
        <tr v-for="(item, index) in checkData.detailList" :key="index" style="line-height: 35px">
          <td width="100" style="text-align: center">{{ index + 1 }}</td>
          <td width="150" style="text-align: center">{{ item.productName }}</td>
          <td width="100" style="text-align: center">{{ item.materialCode }}</td>
          <td width="150" style="text-align: center">{{ item.specModel }}</td>
          <td width="150" style="text-align: center">{{ item.unit }}</td>
          <td width="150" style="text-align: center">{{ item.unitPrice }}</td>
          <td width="150" style="text-align: center"></td>
        </tr>
      </table>
      <div></div>
      <ol style="padding-inline-start: 20px; line-height: 24px">
        <li>质量要求：按企业标准执行生产。</li>
        <li>
          交货方式：
          <span
            v-if="checkData.deliveryMethod"
            style="border-bottom: 1px solid black; display: inline-block"
          >
            {{ checkData.deliveryMethod }} 。
          </span>
          <span v-else style="border-bottom: 1px solid black; width: 100px; display: inline-block">
            &nbsp
          </span>
        </li>
        <li>
          发票开具：
          <span style="border-bottom: 1px solid black; display: inline-block">
            {{ checkData.isInclTax ? '含税' : '不含税' }} 。
          </span>
        </li>
        <li>
          结算方式：
          <span
            v-if="checkData.deliveryMethod"
            style="border-bottom: 1px solid black; display: inline-block"
          >
            {{ checkData.paymentMethod ? checkData.paymentMethod : '  ' }} 。
          </span>
          <span v-else style="border-bottom: 1px solid black; width: 100px; display: inline-block">
            &nbsp
          </span>
        </li>
        <li>
          违约责任及解决合同纠纷的方式：本合同严格按合同执行。如发生合同纠纷，先通过友好协商，协商不成则通过供方所在地法院解决。
        </li>
      </ol>
      <div class="company-info">
        <div>{{ userStore.tenantName }}</div>
        <div>联系人：{{ userStore.userName }}</div>
        <div>联系电话：{{ userStore.phoneNumber }}</div>
        <div>日期：{{ dayjs().format('YYYY年M月DD日') }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { QuotationResItem } from '@renderer/api/salesDep'
import { useUserStore } from '@renderer/store'
import dayjs from 'dayjs'

type Props = {
  checkData: QuotationResItem
}
withDefaults(defineProps<Props>(), {
  checkData: () => {
    return {
      quotationOrderId: '',
      quotationOrderCode: '',
      customerId: '',
      isInclTax: 0,
      deliveryMethod: '',
      paymentMethod: '',
      remark: '',
      customerName: '',
      customerAddress: '',
      contactName: '',
      contactPhone: '',
      detailList: [],
      createdBy: '',
      createdDt: '',
      updatedBy: '',
      updatedDt: '',
      quotationOrderDetailId: ''
    }
  }
})
const userStore = useUserStore().localUserInfo

//打印详情
const printInfo = () => {
  const element = document.createElement('div')
  element.innerHTML = (document as any).querySelector('.print-bill').innerHTML
  document.body.appendChild(element)
  ;(document as any).querySelector('#app').style.display = 'none'
  window.onafterprint = () => {
    ;(document as any).querySelector('#app').style.display = 'block'
    document.body.removeChild(element)
  }
  window.print()
}
defineExpose({ printInfo })
</script>
<style scoped lang="less">
.customer-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  line-height: 24px;
  .info-item {
    flex: 1;
  }
}
.company-info {
  float: right;
  line-height: 24px;
}
</style>
